<!-- 任务列表 -->
<template>
  <div class='task'>
  <search ref="mysearch"
              @doReset="doReset"
              @doQuery="doRefresh"
              :ruleform="ruleForm">
      <template slot="top">
        <el-form-item label="类型："
                      prop="type">
          <el-input type="input"
                    v-model="ruleForm.type"
                    @keyup.enter.native="doRefresh"
                    placeholder="请输入类型"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="分类："
                      prop="classify">
          <el-input type="input"
                    @keyup.enter.native="doRefresh"
                    v-model="ruleForm.classify"
                    placeholder="请输入分类"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="内容："
                      prop="context">
          <el-input type="input"
                    @keyup.enter.native="doRefresh"
                    v-model="ruleForm.context"
                    placeholder="请输入内容"
                    clearable></el-input>
        </el-form-item>
      
        <el-form-item label="状态："
                      prop="status">
          <el-select v-model="ruleForm.status"
                     placeholder="请选择"
                     clearable>
            <el-option label="全部"
                       value=""></el-option>
            <el-option label="进行中"
                       value="100"></el-option>
            <el-option label="部分完成"
                       value="601"></el-option>
            <el-option label="全部完成"
                       value="602"></el-option>
            <el-option label="废弃"
                       value="400"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作人："
                      prop="operbyname">
          <el-input type="input"
                    @keyup.enter.native="doRefresh"
                    v-model="ruleForm.operbyname"
                    placeholder="请输入操作人"
                    clearable></el-input>
        </el-form-item>
      </template>
    </search>
    <myTable ref="mytable"
             :config="tableconfig"
             @handleSelectChange="handleSelectChange">
      <div slot="mytablebody">
      </div>
      <!-- Id -->
      <template v-slot:ID="{ data }">
          {{ data.ID }}
      </template>
      <!-- 操作 -->
      <template v-slot:operation="{ data }">
        <el-link class="blue-link"
                 @click="$router.push({ path: 'editbrand', query: { id: data['ID'] } })">
          编辑
        </el-link>
      </template>
      <!-- 客户名称 -->
      <template v-slot:ClientName="{ data }">
        <el-link>
          <hn-clientExhibit :isDrawer="true">{{
            data.ClientName
          }}</hn-clientExhibit>
        </el-link>
      </template>
      <!-- 状态  @click.native="doShowStatus(data)" -->
      <template v-slot:Status="{ data }">
        <myTag :name="data.Status"
               style="cursor: pointer"></myTag>
      </template>
      <!-- 产品型号 -->
      <template v-slot:PartNumber="{ data }">
        <span v-if="data.PartNumber.length > 1">{{ data.PartNumber[0]
          }}<strong style="font-size: 16px; letter-spacing: 2px">...</strong></span>
        <span v-else> {{ data.PartNumber[0] }}</span>
      </template>
       <!-- 操作 -->
      <!-- <template v-slot:="{ data }">
        <span v-if="data.PartNumber.length > 1">{{ data.PartNumber[0]
          }}<strong style="font-size: 16px; letter-spacing: 2px">编辑</strong></span>
        <span v-else> {{ data.PartNumber[0] }}</span>
      </template> -->
    </myTable>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getToken } from "@/utils/auth";
import { BomList } from '@/api/task.js';


export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
     
  },
  data () {
    //这里存放数据
    return {
         //弹出框状态
            dialog: false,
            // 被动询价弹出框填写
            passiveValue: '',
            ruleForm: {
                type: '',
                context: '',
                classify: '',
                status: '',
                operbyname: '',
            },
            tableconfig: {
                loading: false,
                isselection: true,
                ispagination: true,
                tabledata: [],
                isindex: true,
                thead: [
                    { sort: 'custom', label: 'ID', prop: 'ID',  type: 'slot', width: 150 },
                    { sort:'custom', label: '操作', prop: 'operation', width: 150 ,type: 'slot'},
                    { sort: 'custom', label: '类型', prop: 'type', width: 250 },
                    { sort: null, label: '分类', prop: 'ClientName', width: 300,},
                    { sort: 'custom', label: '内容', prop: 'Currency', width: 150 },
                    { sort: null, label: '摘要', prop: 'PartNumber', type: 'slot' },
                    { sort: 'custom', label: '状态 ', prop: 'Status', type: 'slot' },
                    { sort: null, label: '创建时间', prop: 'CreatorName', width: 150 },
                    { sort: null, label: '更新时间', prop: 'CreatorName', width: 150 },
                    { sort: null, label: '创建人', prop: 'CreatorName', width: 150 },
                     { sort: null, label: '操作人', prop: 'CreatorName', width: 150 },
                    
                ],
                currentpage: 1,
                pagesize: 20,
                total: 0,
            },
            // 当前选中的行数据
            selectrow: [],
      
    };
  },
  //监听属性 类似于data概念
  computed: {
     
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
        handleSelectChange(section) {
            this.selectrow = section;
        },
        // 重置搜索
        doReset() {
            Object.keys(this.ruleForm).map(x => {
                this.ruleForm[x] = '';
            });
            this.$message({
                message: '已重置',
                type: 'success',
            });
            this.doRefresh();
        },
        // 刷新
        doRefresh() {
            //页码从第一页开始
            this.tableconfig.currentpage = 1;
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
            this.doQuery();
        },
        //搜索
        async doQuery() {
            // console.log(111)
            // 获取表格
            this.tableconfig.loading = true;
            let queryparams = {};
            Object.keys(this.ruleForm).map(x => {
                // console.log(x);
                if (this.ruleForm[x]) {
                    queryparams[x] = this.ruleForm[x];
                    // if (x != 'CreateDate') {
                    //     queryparams[x] = this.ruleForm[x];
                    // } else {
                    //     queryparams.startdate = this.ruleForm[x][0];
                    //     queryparams.enddate = this.ruleForm[x][1];
                    // }
                }
            });
            queryparams.page = this.tableconfig.currentpage;
            queryparams.pagesize = this.tableconfig.pagesize;
            let data1 = await BomList(queryparams);
            console.log(data1);
            if (data1.data) {
                this.tableconfig.total = data1.data.Total;
                this.tableconfig.tabledata = [];
                if (data1.data.Rows.length > 0) {
                    this.tableconfig.tabledata = [];
                    data1.data.Rows.map(x => {
                        let objx = x;
                        if (x.Client) {
                            objx.ClientName = x.Client.ClientName;
                            objx.Vip = x.Client.Vip;
                            objx.Grade = x.Client.Grade;
                            objx.CreateDate = x.CreateDate.split(' ')[0];
                        }
                        this.tableconfig.tabledata.push(objx);
                    });
                }
            }
            this.tableconfig.loading = false;
        },
          // 页码数更新
        handleSizeChange(val) {
            this.tableconfig.currentpage = 1;
            this.tableconfig.pagesize = val;
            this.doQuery();
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
        },
        // 当前页码更新
        handleCurrentChange(val) {
            this.tableconfig.currentpage = val;
            this.doQuery();
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
        },
        handlesortChange(column) {
            this.ruleForm.orderbyname = column.prop;
            this.doQuery();
        },

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
      this.doQuery();
    // console.log('standard2');
    // console.log(getToken());
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    //  console.log( getToken )
  },
  //beforeCreate() {}, //生命周期 - 创建之前
  //beforeMount() {}, //生命周期 - 挂载之前
  //beforeUpdate() {}, //生命周期 - 更新之前
  //updated() {}, //生命周期 - 更新之后
  //beforeDestroy() {}, //生命周期 - 销毁之前
  //destroyed() {}, //生命周期 - 销毁完成
  //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
@import './../../assets/reset.css';
.task{
    padding: 15px;
}
.blue-link{
  color: #1890ff;
}


</style>